<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="donghua.css">
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        flex-direction: column;
    }

    .tick {
        stroke-dasharray: 810;
        stroke-dashoffset: 810;
    }

    ul.checked1+div>svg .tick {
        animation: tick 2s ease-out;
        animation-fill-mode: forwards;
        /* animation-delay: .95s; */
    }

    ul.checked2+div>svg .tick {
        animation: tick 2s ease-out;
        animation-fill-mode: forwards;
        /* animation-delay: .95s; */
    }


    @keyframes tick {
        from {
            stroke-dashoffset: 810;
        }

        to {
            stroke-dashoffset: 0;
        }
    }
</style>

<body>

    <input style="top: 70px;" type="text" value="" id="thisStar_index">
    <input type="text" value="" id="thisStar_id">
    <input style="top:130px" type="text" value="" id="thisStar_name">
    <ul id="checkStar">
    </ul>
    <div id="svgBox"></div>

</body>
<script>
    let startArr = [{
        "id": "Aries",
        "name": "白羊座",
        "point": [
            [0.3, 0.78],
            [0.34, 0.66],
            [0.28, 0.48],
            [0.6, 0.26],
            [0.65, 0.2],
            [0.71, 0.23],
            [0.7, 0.32],
            [0.72, 0.36]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5],
            [3, 6, 7]
        ]
    }, {
        "id": "Libra",
        "name": "天秤座",
        "point": [
            [0.16, 0.67],
            [0.34, 0.6],
            [0.6, 0.27],
            [0.75, 0.23],
            [0.84, 0.47],
            [0.63, 0.74],
            [0.51, 0.78]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5, 6]
        ]
    }, {
        "id": "Capricorn",
        "name": "魔羯座",
        "point": [
            [0.78, 0.21],
            [0.78, 0.34],
            [0.75, 0.45],
            [0.75, 0.7],
            [0.69, 0.78],
            [0.31, 0.66],
            [0.22, 0.49],
            [0.3, 0.53],
            [0.53, 0.54]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5, 6, 7, 8, 1]
        ]
    }, {
        "id": "Aquarius",
        "name": "水瓶座",
        "point": [
            [0.45, 0.21],
            [0.37, 0.35],
            [0.27, 0.51],
            [0.3, 0.58],
            [0.29, 0.64],
            [0.48, 0.79],
            [0.51, 0.71],
            [0.58, 0.68],
            [0.73, 0.74],
            [0.43, 0.53],
            [0.53, 0.47]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5, 6, 7, 8],
            [2, 9, 10]
        ]
    }, {
        "id": "Pisces",
        "name": "双鱼座",
        "point": [
            [0.28, 0.43],
            [0.28, 0.53],
            [0.36, 0.73],
            [0.43, 0.78],
            [0.5, 0.7],
            [0.53, 0.62],
            [0.57, 0.58],
            [0.63, 0.43],
            [0.67, 0.39],
            [0.74, 0.39],
            [0.77, 0.34],
            [0.72, 0.3],
            [0.75, 0.22],
            [0.23, 0.5],
            [0.66, 0.33]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            [0, 13, 1],
            [8, 14, 11]
        ]
    }, {
        "id": "Taurus",
        "name": "金牛座",
        "point": [
            [0.29, 0.21],
            [0.39, 0.36],
            [0.5, 0.51],
            [0.5, 0.57],
            [0.61, 0.63],
            [0.77, 0.71],
            [0.79, 0.79],
            [0.22, 0.43],
            [0.39, 0.57],
            [0.6, 0.71],
            [0.67, 0.76]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5, 6],
            [7, 8, 3],
            [4, 9, 10]
        ]
    }, {
        "id": "Gemini",
        "name": "双子座",
        "point": [
            [0.18, 0.37],
            [0.25, 0.45],
            [0.35, 0.55],
            [0.39, 0.68],
            [0.49, 0.77],
            [0.51, 0.63],
            [0.57, 0.78],
            [0.28, 0.29],
            [0.42, 0.32],
            [0.61, 0.49],
            [0.72, 0.6],
            [0.83, 0.59],
            [0.69, 0.75],
            [0.22, 0.54],
            [0.35, 0.43],
            [0.48, 0.21]
        ],
        "line": [
            [0, 1, 2, 3, 4],
            [2, 5, 6],
            [7, 8, 9, 10, 11],
            [9, 12],
            [13, 1, 14, 8, 15]
        ]
    }, {
        "id": "Cancer",
        "name": "巨蟹座",
        "point": [
            [0.16, 0.39],
            [0.27, 0.36],
            [0.52, 0.49],
            [0.57, 0.65],
            [0.83, 0.78],
            [0.44, 0.21]
        ],
        "line": [
            [0, 1, 2, 3, 4],
            [2, 5]
        ]
    }, {
        "id": "Leo",
        "name": "狮子座",
        "point": [
            [0.16, 0.75],
            [0.23, 0.67],
            [0.39, 0.77],
            [0.71, 0.53],
            [0.64, 0.39],
            [0.55, 0.37],
            [0.47, 0.27],
            [0.54, 0.24],
            [0.6, 0.27],
            [0.85, 0.56]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5, 6, 7, 8],
            [3, 9]
        ]
    }, {
        "id": "Virgo",
        "name": "处女座",
        "point": [
            [0.16, 0.59],
            [0.35, 0.63],
            [0.44, 0.7],
            [0.62, 0.51],
            [0.77, 0.46],
            [0.84, 0.37],
            [0.6, 0.42],
            [0.65, 0.26],
            [0.34, 0.75]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5],
            [3, 6, 7],
            [2, 8]
        ]
    }, {
        "id": "Scorpio",
        "name": "天蝎座",
        "point": [
            [0.17, 0.5],
            [0.28, 0.63],
            [0.19, 0.7],
            [0.28, 0.78],
            [0.41, 0.77],
            [0.49, 0.72],
            [0.57, 0.55],
            [0.59, 0.44],
            [0.69, 0.31],
            [0.74, 0.21],
            [0.82, 0.29],
            [0.79, 0.44],
            [0.73, 0.5],
            [0.38, 0.47]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            [1, 13],
            [8, 11]
        ]
    }, {
        "id": "Sagittarius",
        "name": "射手座",
        "point": [
            [0.22, 0.66],
            [0.24, 0.51],
            [0.45, 0.4],
            [0.54, 0.37],
            [0.59, 0.43],
            [0.66, 0.5],
            [0.63, 0.6],
            [0.66, 0.67],
            [0.74, 0.53],
            [0.77, 0.39],
            [0.49, 0.47],
            [0.29, 0.68],
            [0.3, 0.78],
            [0.48, 0.21],
            [0.52, 0.27],
            [0.59, 0.29]
        ],
        "line": [
            [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            [2, 10, 11, 12],
            [10, 4],
            [13, 14, 15, 3],
            [14, 3]
        ]
    }]
</script>
<script>

    $(function () {
        // 加载列表
        loadMenu()
    })
    function loadMenu() {
        let ulHtml = ''
        startArr.forEach((item, i) => {
            ulHtml += `<li  data-index="` + i + `" ><input type="radio" name="star">` + item.name + `</li>`
        })
        $("#checkStar").empty().append(ulHtml)
		
		$(this).find("input").prop("checked", "checked");
		$("#thisStar_index").val(0)
		let thisStar = startArr[0]
		$("#thisStar_id").val(thisStar.id)
		$("#thisStar_name").val(thisStar.name)
		if ($("#checkStar").hasClass("checked1")) {
		    $("#checkStar").removeClass("checked1").addClass("checked2")
		} else {
		    $("#checkStar").removeClass("checked2").addClass("checked1")
		
		}
		// 加载绘图事件
		loadSvg()
        $("#checkStar li").on("click", function () {
			console.log($(this).data("index"));
            $(this).find("input").prop("checked", "checked");
            $("#thisStar_index").val($(this).data("index"))
            let thisStar = startArr[$(this).data("index")]
            $("#thisStar_id").val(thisStar.id)
            $("#thisStar_name").val(thisStar.name)
            if ($("#checkStar").hasClass("checked1")) {
                $("#checkStar").removeClass("checked1").addClass("checked2")
            } else {
                $("#checkStar").removeClass("checked2").addClass("checked1")

            }
            // 加载绘图事件
            loadSvg()
        })
    }
    function loadSvg() {
        let starIndex = $("#thisStar_index").val()
        let starId = $("#thisStar_id").val()
        let starName = $("#thisStar_name").val()
        let html = ''
        html += `<svg width="400" height="400">`
        let polylineArr = startArr[starIndex].line
        let pointArr = startArr[starIndex].point
        polylineArr.forEach(element => {
            html += `<polyline fill="none" stroke="#68E534" stroke-width="8" points="`
            element.forEach((i, item) => {
                html += parseInt(pointArr[i][0] * 400) + `,` + parseInt(pointArr[i][1] * 400) + ' '
            })
            html += `" stroke-linecap="round" stroke-linejoin="round" class="tick" />`
        });
        html += `</svg>`
        $("#svgBox").empty().append(html)
    }
</script>

<style>
    ul#checkStar {
        margin: 0;
        padding: 0;
        position: fixed;
        left: 10%;
    }

    input[type="text"] {
        position: fixed;
        left: 10%;
        top: 100px;
    }

    ul#checkStar li {
        padding: 10px;
        cursor: pointer;
        user-select: none;
    }
</style>

</html>